<template>
    <div class="container">
      <el-form :model="form"  label-width="120px" class="form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="营销次数上限">
              <el-input v-model="form.sendLimit" type="number" class="input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回捞系数">
              <el-input v-model="form.pushRatio" type="number" class="input"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="风险系数">
              <el-input v-model="form.riskRatio" type="number" class="input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="省份过滤类型">
              <el-select v-model="form.provFilterType" placeholder="请选择" class="input">
                <el-option label="包含" value="include"></el-option>
                <el-option label="排除" value="exclude"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="省份">
          <el-checkbox-group v-model="form.province">
            <el-row>
              <el-col :span="8"><el-checkbox label="北京市" value="北京市"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="天津市" value="天津市"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="上海市" value="上海市"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="重庆市" value="重庆市"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="河北省" value="河北省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="山西省" value="山西省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="辽宁省" value="辽宁省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="吉林省" value="吉林省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="黑龙江省" value="黑龙江省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="江苏省" value="江苏省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="浙江省" value="浙江省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="安徽省" value="安徽省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="福建省" value="福建省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="江西省" value="江西省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="山东省" value="山东省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="河南省" value="河南省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="湖北省" value="湖北省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="湖南省" value="湖南省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="广东省" value="广东省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="广西壮族自治区" value="广西壮族自治区"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="海南省" value="海南省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="四川省" value="四川省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="贵州省" value="贵州省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="云南省" value="云南省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="西藏自治区" value="西藏自治区"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="陕西省" value="陕西省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="甘肃省" value="甘肃省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="青海省" value="青海省"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="宁夏回族自治区" value="宁夏回族自治区"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="新疆维吾尔自治区" value="新疆维吾尔自治区"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="香港特别行政区" value="香港特别行政区"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="澳门特别行政区" value="澳门特别行政区"></el-checkbox></el-col>
              <el-col :span="8"><el-checkbox label="台湾省" value="台湾省"></el-checkbox></el-col>
            </el-row>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form-item>
      </el-form>
      <div class="result">
      <h3>导出结果</h3>
      <div v-if="loading" class="loading">请求中...</div>
      <div v-else-if="result">
        <p>下载链接: <a :href="result.url" target="_blank">{{ result.url }}</a></p>
        <p>总时间: {{ result.totalTime }} s</p>
      </div>
      <div v-else class="empty-result">暂无数据</div>
    </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { exportInfoApi } from '@/api/file';
  
  const form = ref({
    sendLimit: 10,
    pushRatio: 65,
    riskRatio: 55,
    provFilterType: 'include',
    province: ['北京市']
  });
  
  const result = ref(null);
  const loading = ref(false);
  
  const handleSubmit = async () => {
    loading.value = true;
    try {
      const formData = { ...form.value, province: form.value.province.join(',') };
      const response = await exportInfoApi(formData);
      result.value = response.data;
    } catch (error) {
      console.error('请求失败:', error);
    } finally {
      loading.value = false;
    }
  };
  </script>
  <style scoped>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .form {
    border: 1px solid #dcdcdc;
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }
  
  .el-form-item {
    margin-bottom: 20px;
    width: 100%;
  }
  
  .input {
    width: 100%;
  }
  
  .el-button {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .result {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    text-align: center;
  }
  
  .result h3 {
    margin-bottom: 10px;
  }
  
  .result p {
    margin: 5px 0;
  }
  
  .empty-result {
    color: #999;
  }
  </style>